<template>
    <div class="box">
        <h1>晨峰教育后台管理系统</h1>
        <!-- <h1>欢迎:{{ username }}({{ rolename }})</h1> -->
        <el-dropdown style="margin-top: 20px;">
            <span class="el-dropdown-link">
                <h1 style="color: black;">欢迎:
                    <!-- <img src="https://ihrm-java.itheima.net/static/img/bigUserHeader.fda3837.png" alt=""
                        style="width: 20px; height: 20px;"> -->

                    {{ username }}({{ rolename }})
                </h1>
                <el-icon class="el-icon--right">
                    <arrow-down />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item>个人中心</el-dropdown-item>
                    <el-dropdown-item @click="logOut">退出登录</el-dropdown-item>

                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup>
import { ref } from "vue"
import { useRouter } from "vue-router"

const username = ref("")
const rolename = ref("")
const router = useRouter()
username.value = sessionStorage.getItem("username")
rolename.value = sessionStorage.getItem("rolename")


//退出
const logOut = () => {
    sessionStorage.clear()
    router.push({
        path: "/login"
    })
}

</script>

<style lang="less" scoped>
.box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

}
</style>